<template>
  <!-- <div class="Pie" ref="chart" :style="{
    width: px2(width, true),
    height: px2(height, true)
  }"></div> -->
  <div
    class="Pie-box pr"
    :style="{
      width: px2(width + 170)
    }"
  >
    <div
      class="Pie BH"
      ref="chart"
      :style="pieStyle"
    >
      
    </div>

    <div class="legend-box">
      <div
        v-for="(item, index) in chartData"
        class="legend"
        :class="{ ac: pieInd === index }"
        :key="index"
      >
        <i :style="{ backgroundColor: color[index] }"></i>{{ item.name }}
      </div>
    </div>
  </div>
</template>

<script>
import pieOptions from "@/MCharts/components/pie/options";
import {px2} from "@/MCharts/style/Style";
export default {
  name: "MChartsPie",
  data() {
    return {
      pieInd: 0,
      color: [
        "#ede563",
        "#fd7802",
        "#fc3846",
        "#f02899",
        "#b62ebf",
        "#8039b2",
        "#5249a8",
        "#0083cf",
        "#00b9e7",
        "#35d5c0",
        "#00ae29",
        "#abcd0e",
      ]
    }
  },
  props:{
    data: {},
    options: {},
    type: String,
    // background: String,
    // backgroundPosition: {
    //   type: Array,
    //   default: ['50%', '50%'],
    // },
    // backgroundSize: {
    //   type: Array,
    //   default: ['100%', '100%'],
    // },
    width:{
      type: Number,
      default: 400
    },
    height:{
      type: Number,
      default: 400
    }
  },
  components: {},
  watch: {
    data: {
      handler: function (e) {
        this.init()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    pieStyle () {
      // 仅设置饼图的大小，不包含自定义图例
      const style = {
        width: px2(this.width, true),
        height: px2(this.height, true),
        backgroundSize: px2(Math.min(this.width, this.height) * 0.63, true)
      }

      // // 背景图位置，首先判断传入值是否带有%号
      // const positionX = String(this.backgroundPosition[0]).match(/(\d+)%/) ? this.backgroundPosition[0] : this.px2(this.backgroundPosition[0])
      // const positionY = String(this.backgroundPosition[1]).match(/(\d+)%/) ? this.backgroundPosition[0] : this.px2(this.backgroundPosition[1])
      // style.backgroundPosition = `${positionX} ${positionY}`

      // // 背景图大小，首先判断传入值是否带有%号
      // const sizeX = String(this.backgroundSize[0]).match(/(\d+)%/) ? this.backgroundSize[0] : this.px2(this.backgroundSize[0])
      // const sizeY = String(this.backgroundSize[1]).match(/(\d+)%/) ? this.backgroundSize[0] : this.px2(this.backgroundSize[1])
      // style.backgroundSize = `${sizeX} ${sizeY}`
      return style
    },
    chartData () {
      return this.data ? this.data[0].data : []
    }
  },
  methods: {
    px2,
    init(){
      let chartDom = this.$refs.chart
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(chartDom);

      // 指定图表的配置项和数据
      var option = pieOptions.getOptions(this.data, this.options, 'Spacecg');

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: this.pieInd,
      })

      this.chartLightLoop(myChart)
    },

    chartLightLoop (chart) {
      setInterval(() => {
        this.pieInd++;
        if (this.pieInd >= this.chartData.length) {
          this.pieInd = 0;
        }
        let prevInd = !this.pieInd ? this.chartData.length - 1 : this.pieInd - 1;
        chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: prevInd,
        });
        chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: this.pieInd,
        });
      }, 2000);
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/MCharts/style/var.scss";
// .Pie{
//   background: url("../../assets/images/right_pie_bg.png")
//     no-repeat center center;
//   background-size: 63%;
// }
.pie-text {
  position: absolute;
  width: px2(460);
  height: px2(468);
  line-height: px2(448);
  font-size: px2(72);
  text-align: center;
  top: 0;
  left: 0;
  span {
    font-size: px2(36);
  }
}
.legend-box {
  position: absolute;
  width: px2(170);
  height: px2(150);
  top: px2(96);
  right: px2(0);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  .legend {
    position: relative;
    width: px2(80);
    height: px2(24);
    line-height: px2(24);
    font-size: px2(14);
    padding-left: px2(44);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    &.ac:before {
      content: "";
      position: absolute;
      border: px2(2) solid #6edaf5;
      border-radius: px2(8);
      top: px2(0);
      bottom: px2(0);
      left: px2(0);
      right: px2(0);
    }
    i {
      position: absolute;
      width: px2(24);
      height: px2(12);
      vertical-align: middle;
      top: px2(6);
      left: px2(10);
    }
  }
}
</style>
